<!--
 * @Author: yuanweijiang
 * @Date: 2024-01-03 14:19:33
 * @LastEditors: XHM
-->
<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="flex items-center">
				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
					<el-form-item prop="wokeSpaceName">
						<el-input placeholder="请输入项目ID" clearable style="max-width: 180px" v-model="state.queryForm.wokeSpaceName" />
					</el-form-item>
					<el-form-item prop="projectNameCh">
						<el-input placeholder="请输入项目名称" clearable style="max-width: 180px" v-model="state.queryForm.projectNameCh" />
					</el-form-item>
					<el-form-item>
						<el-button @click="query" class="ml10" icon="search" type="primary"> 查询 </el-button>
						<el-button icon="Refresh" @click="resetQuery">重置</el-button>
					</el-form-item>
					<el-form-item class="absolute right-8">
						<el-button @click="addHandle" class="ml10" icon="Plus" type="primary"> 新建项目 </el-button>
					</el-form-item></el-form
				>
			</div>
			<el-table
				ref="tableRef"
				:data="state.dataList"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				row-key="path"
				style="width: 100%"
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle?.headerCellStyle"
			>
				<el-table-column prop="wokeSpaceName" label="项目ID" />
				<el-table-column prop="projectNameCh" label="项目名称" />
				<el-table-column prop="defaultStr" label="是否默认">
					<template #default="scope">
						{{ scope.row.defaultStr ? '是' : '否' }}
					</template>
				</el-table-column>
				<el-table-column prop="onEnable" label="启用状态">
					<template #default="scope">
						<el-tag :color="scope.row.onEnable ? '#DAF7C9' : '#E8EAF1'">{{ scope.row.onEnable ? '启用' : '禁止' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createName" label="创建人" />
				<el-table-column prop="createTime" label="创建时间" width="180" />
				<el-table-column prop="wokeSpaceBack" label="项目说明" show-overflow-tooltip />
				<el-table-column label="文件">
					<template #default="scope">
						<span @click="lookDetail('文件', scope.row)" class="jColor">查看</span>
					</template>
				</el-table-column>
				<el-table-column label="图层">
					<template #default="scope">
						<span @click="lookDetail('图层', scope.row)" class="jColor">查看</span>
					</template>
				</el-table-column>
				<el-table-column label="查看权限">
					<template #default="scope">
						<i class="iconfont icon-bianji1 jColor" @click="lookRole(scope.row)"></i>
					</template>
				</el-table-column>
				<el-table-column prop="date" label="管理">
					<template #default="scope">
						<i class="iconfont icon-bianji1 jColor mr-4" @click="handleEdit(scope.row)"></i>
						<i class="iconfont icon-shanchu jColor" @click="handleDelete(scope.row)"></i>
					</template>
				</el-table-column>
			</el-table>
			<Pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </Pagination>
		</div>
		<projectDetail ref="projectDio" />
		<addProject ref="addPro" @refresh="getDataList" />
		<roleId ref="roleDetail" />
	</div>
</template>

<script lang="ts" name="proJect" setup>
import { getList, delPost, rolesGet, geoLayerList, fileDataSourceLsit } from '/@/api/project';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';
import projectDetail from './components/project/projectdetail.vue';
import addProject from './components/project/addprodect.vue';
import roleId from './components/project/roleid.vue';
import { useUserInfo } from '/@/stores/userInfo';
// 引入组件
const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const queryRef = ref();
const roleDetail = ref();
const title = ref('');
const addPro = ref('');
const projectDio = ref('');
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		// wokeSpaceName: '',
	},
	pageList: getList,
	props: {
		item: 'records',
		totalCount: 'total',
	},
});

//查看文件列表
function lookDetail(name: string, proName: any) {
	projectDio.value.state.queryForm.projectName = proName.wokeSpaceName;
	projectDio.value.title = name;
	projectDio.value.openDialog();
	projectDio.value.state.queryForm.projectName = proName.wokeSpaceName;
	projectDio.value.state.dataList = [];
	if (name === '文件') {
		projectDio.value.state.pageList = fileDataSourceLsit;
	} else {
		projectDio.value.state.pageList = geoLayerList;
		projectDio.value.state.pagination = {};
	}
}
//新建项目
const addHandle = () => {
	addPro.value.openDialog();
	addPro.value.form = { wokeSpaceName: '', onEnable: true, defaultStr: false, wokeSpaceBack: '' };
	addPro.value.title = '新建项目';
};
const { getDataList, tableStyle, currentChangeHandle, sizeChangeHandle } = useTable(state);
// 展开折叠树
// const handleExpand = async () => {
// 	isExpand.value = !isExpand.value;
// 	const dataList = await pageList();
// 	toggleExpand(dataList.data, isExpand.value);
// };

// const toggleExpand = (children: any[], unfold = true) => {
// 	for (const key in children) {
// 		tableRef.value?.toggleRowExpansion(children[key], unfold);
// 		if (children[key].children) {
// 			toggleExpand(children[key].children!, unfold);
// 		}
// 	}
// };

// 搜索事件
const query = () => {
	state.dataList = [];
	getDataList();
};

// 清空搜索条件
const resetQuery = () => {
	state.queryForm = {};
	getDataList();
};

// 删除操作
const handleDelete = async (row: any) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await delPost({ wokeSpaceName: row.wokeSpaceName });
		// 更新上下文的 user信息
		useUserInfo().setUserInfos();
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
//修改操作
const handleEdit = (row: any) => {
	addPro.value.form = { ...row };
	addPro.value.title = '修改项目';
	addPro.value.openDialog();
	addPro.value.oldWokeSpaceName = row.wokeSpaceName;
};
//查看权限
const lookRole = (row: any) => {
	roleDetail.value.openDialog();
	roleDetail.value.wokeSpaceName = row.wokeSpaceName;
	roleDetail.value.getInfo(row.wokeSpaceName);
};
</script>
